    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐系统 - 管理员后台</title>
    <link rel="stylesheet" href="res/layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .layui-layout-admin .layui-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .layui-side {
            top: 60px;
        }
        .layui-body {
            top: 60px;
            bottom: 0;
            left: 200px;
        }
        .layui-logo {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
        }
        .layui-nav-tree .layui-nav-child dd.layui-this,
        .layui-nav-tree .layui-nav-child dd.layui-this a,
        .layui-nav-tree .layui-this,
        .layui-nav-tree .layui-this>a {
            background-color: #667eea !important;
        }
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
            margin-bottom: 15px;
        }
        .stat-card .icon {
            font-size: 40px;
            float: left;
            margin-right: 15px;
        }
        .stat-card .content {
            overflow: hidden;
        }
        .stat-card .title {
            color: #999;
            font-size: 14px;
        }
        .stat-card .value {
            font-size: 28px;
            font-weight: bold;
            margin-top: 5px;
        }
        .stat-card.blue { border-left: 4px solid #1E9FFF; }
        .stat-card.blue .icon { color: #1E9FFF; }
        .stat-card.green { border-left: 4px solid #16B777; }
        .stat-card.green .icon { color: #16B777; }
        .stat-card.orange { border-left: 4px solid #FFB800; }
        .stat-card.orange .icon { color: #FFB800; }
        .stat-card.red { border-left: 4px solid #FF5722; }
        .stat-card.red .icon { color: #FF5722; }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部 -->
    <div class="layui-header">
        <div class="layui-logo">
            <i class="layui-icon layui-icon-music"></i> 音乐系统管理后台
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-username"></i>
                    <span id="adminUsername">管理员</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="showUserInfo()">个人信息</a></dd>
                    <dd><a href="javascript:;" onclick="logout()">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    
    <!-- 侧边栏 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="sideNav">
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;" data-url="dashboard"><i class="layui-icon layui-icon-home"></i> 控制台</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-music"></i> 音乐管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="musicList">音乐列表</a></dd>
                        <dd><a href="javascript:;" data-url="musicAdd">添加音乐</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-user"></i> 歌手管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="singerList">歌手列表</a></dd>
                        <dd><a href="javascript:;" data-url="singerAdd">添加歌手</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-template-1"></i> 专辑管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="albumList">专辑列表</a></dd>
                        <dd><a href="javascript:;" data-url="albumAdd">添加专辑</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-group"></i> 用户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="userList">用户列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-list"></i> 歌单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="playlistList">歌单列表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="layui-icon layui-icon-chat"></i> 评论管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="commentList">评论列表</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    
    <!-- 主体内容 -->
    <div class="layui-body">
        <div style="padding: 15px;" id="mainContent">
            <!-- 默认显示控制台 -->
            <div id="dashboard">
                <fieldset class="layui-elem-field">
                    <legend>数据统计</legend>
                    <div class="layui-field-box">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md3">
                                <div class="stat-card blue">
                                    <i class="layui-icon layui-icon-music icon"></i>
                                    <div class="content">
                                        <div class="title">音乐总数</div>
                                        <div class="value" id="statMusicCount">0</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="stat-card green">
                                    <i class="layui-icon layui-icon-user icon"></i>
                                    <div class="content">
                                        <div class="title">歌手总数</div>
                                        <div class="value" id="statSingerCount">0</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="stat-card orange">
                                    <i class="layui-icon layui-icon-template-1 icon"></i>
                                    <div class="content">
                                        <div class="title">专辑总数</div>
                                        <div class="value" id="statAlbumCount">0</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="stat-card red">
                                    <i class="layui-icon layui-icon-group icon"></i>
                                    <div class="content">
                                        <div class="title">用户总数</div>
                                        <div class="value" id="statUserCount">0</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
                
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>热门音乐 TOP 10</legend>
                </fieldset>
                <table class="layui-hide" id="hotMusicTable" lay-filter="hotMusicTable"></table>
            </div>
        </div>
    </div>
</div>

<script src="res/layui/layui.js"></script>
<script>
    const API_BASE = 'http://localhost:8080';
    
    // 检查登录状态和管理员权限
    function checkLogin() {
        var userInfo = localStorage.getItem('userInfo');
        var isAdmin = localStorage.getItem('isAdmin');
        
        console.log('=== 检查管理员权限 ===');
        console.log('userInfo:', userInfo);
        console.log('isAdmin:', isAdmin);
        
        if (!userInfo) {
            // 未登录，跳转到管理员登录页面
            console.log('❌ 未登录');
            layui.layer.msg('请先登录', {icon: 2, time: 1500}, function(){
                window.location.href = 'adminLogin.html';
            });
            return false;
        }
        
        var user = JSON.parse(userInfo);
        console.log('当前用户:', user.username);
        console.log('isAdmin标记:', isAdmin);
        
        // 验证管理员权限（只需要是管理员表中的用户即可）
        // 1. 必须有用户ID（表示是从数据库查询的用户）
        // 2. isAdmin 标记必须是 'true'
        if (!user.id || isAdmin !== 'true') {
            // 不是管理员，跳转到管理员登录页
            console.log('❌ 权限验证失败');
            console.log('用户ID检查:', !user.id ? '失败' : '通过');
            console.log('isAdmin检查:', isAdmin !== 'true' ? '失败' : '通过');
                        
            layui.layer.alert(
                '您不是管理员，无权访问此页面！<br><br>' +
                '当前用户: <strong>' + user.username + '</strong><br>' +
                'isAdmin标记: <strong>' + (isAdmin || '未设置') + '</strong><br><br>' +
                '访问管理后台需要：<br>' +
                '1. 从管理员登录页面登录<br>' +
                '2. 必须是管理员表中的用户<br><br>' +
                '请使用管理员账号从 <a href="adminLogin.html">管理员登录页</a> 登录',
                {icon: 2, title: '权限不足'},
                function(){
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('token');
                    localStorage.removeItem('isAdmin');
                    window.location.href = 'adminLogin.html';
                }
            );
            return false;
        }
        
        console.log('✅ 管理员权限验证通过');
        document.getElementById('adminUsername').textContent = user.username || '管理员';
        return true;
    }
    
    // 退出登录
    function logout() {
        layui.layer.confirm('确定要退出登录吗？', {icon: 3, title: '提示'}, function(index){
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');
            localStorage.removeItem('isAdmin');
            layui.layer.msg('已退出登录', {icon: 1, time: 1000}, function(){
                window.location.href = 'adminLogin.html';
            });
            layui.layer.close(index);
        });
    }
    
    // 显示用户信息
    function showUserInfo() {
        var userInfo = JSON.parse(localStorage.getItem('userInfo'));
        layui.layer.open({
            type: 1,
            title: '个人信息',
            area: ['400px', '300px'],
            content: `
                <div style="padding: 20px;">
                    <p><strong>用户ID：</strong>${userInfo.id}</p>
                    <p><strong>用户名：</strong>${userInfo.username}</p>
                    <p><strong>手机号：</strong>${userInfo.phone || '未设置'}</p>
                    <p><strong>邮箱：</strong>${userInfo.email || '未设置'}</p>
                    <p><strong>注册时间：</strong>${userInfo.registerTime || '未知'}</p>
                </div>
            `
        });
    }
    
    // 页面加载时检查登录
    if (!checkLogin()) {
        // 未登录会在checkLogin中跳转
    }
    
    layui.use(['element', 'table', 'layer', 'form', 'laydate'], function(){
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        
        // 设置为全局
        window.layui = layui;
        
        // 加载统计数据
        loadStats();
        
        // 加载热门音乐
        loadHotMusic();
        
        // 侧边栏点击事件
        layui.jquery('.layui-nav-tree a[data-url]').on('click', function(){
            var url = layui.jquery(this).attr('data-url');
            loadContent(url);
        });
    });
    
    // 加载统计数据
    function loadStats() {
        // 加载音乐总数
        fetch(API_BASE + '/music/list?page=1&limit=1')
            .then(res => res.json())
            .then(result => {
                if(result.success && result.data) {
                    document.getElementById('statMusicCount').textContent = result.data.total || 0;
                }
            });
        
        // 加载歌手总数
        fetch(API_BASE + '/singer/list?page=1&limit=1')
            .then(res => res.json())
            .then(result => {
                if(result.success && result.data) {
                    document.getElementById('statSingerCount').textContent = result.data.total || 0;
                }
            });
        
        // 加载专辑总数
        fetch(API_BASE + '/album/list?page=1&limit=1')
            .then(res => res.json())
            .then(result => {
                if(result.success && result.data) {
                    document.getElementById('statAlbumCount').textContent = result.data.total || 0;
                }
            });
        
        // 加载用户总数
        fetch(API_BASE + '/user/list?page=1&limit=1')
            .then(res => res.json())
            .then(result => {
                if(result.success && result.data) {
                    document.getElementById('statUserCount').textContent = result.data.total || 0;
                }
            });
    }
    
    // 加载热门音乐
    function loadHotMusic() {
        layui.table.render({
            elem: '#hotMusicTable',
            url: API_BASE + '/music/hot?limit=10',
            parseData: function(res){
                return {
                    "code": res.success ? 0 : 1,
                    "msg": res.message || '',
                    "count": res.data ? res.data.length : 0,
                    "data": res.data || []
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'name', title: '歌曲名称', width: 250},
                {field: 'playCount', title: '播放次数', width: 120, sort: true},
                {field: 'duration', title: '时长(秒)', width: 100},
                {field: 'releaseTime', title: '发行时间', width: 180},
                {field: 'status', title: '状态', width: 100, templet: function(d){
                    return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                }}
            ]],
            page: false
        });
    }
    
    // 加载不同内容页面
    function loadContent(url) {
        var content = document.getElementById('mainContent');
        
        switch(url) {
            case 'dashboard':
                location.reload();
                break;
            case 'musicList':
                content.innerHTML = '<div id="musicListPage"></div>';
                loadMusicList();
                break;
            case 'singerList':
                content.innerHTML = '<div id="singerListPage"></div>';
                loadSingerList();
                break;
            case 'albumList':
                content.innerHTML = '<div id="albumListPage"></div>';
                loadAlbumList();
                break;
            case 'userList':
                content.innerHTML = '<div id="userListPage"></div>';
                loadUserList();
                break;
            case 'playlistList':
                content.innerHTML = '<div id="playlistListPage"></div>';
                loadPlaylistList();
                break;
            case 'commentList':
                content.innerHTML = '<div id="commentListPage"></div>';
                loadCommentList();
                break;
            case 'musicAdd':
                showAddMusicForm();
                break;
            case 'singerAdd':
                showAddSingerForm();
                break;
            case 'albumAdd':
                showAddAlbumForm();
                break;
            default:
                layui.layer.msg('功能开发中...', {icon: 16});
        }
    }
    
    // 音乐列表页面
    function loadMusicList() {
        var html = `
            <fieldset class="layui-elem-field">
                <legend>音乐管理</legend>
                <div class="layui-field-box">
                    <div class="layui-btn-group" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm" onclick="showAddMusicForm()">
                            <i class="layui-icon layui-icon-add-1"></i> 添加音乐
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="layui.table.reload('musicListTable')">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="musicListTable" lay-filter="musicListTable"></table>
                </div>
            </fieldset>
        `;
        document.getElementById('musicListPage').innerHTML = html;
        
        layui.table.render({
            elem: '#musicListTable',
            url: API_BASE + '/music/list',
            page: true,
            limit: 15,
            parseData: function(res){
                return {
                    "code": res.success ? 0 : 1,
                    "msg": res.message || '',
                    "count": res.data.total || 0,
                    "data": res.data.records || []
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'name', title: '歌曲名称', width: 200},
                {field: 'duration', title: '时长(秒)', width: 100},
                {field: 'playCount', title: '播放次数', width: 120, sort: true},
                {field: 'releaseTime', title: '发行时间', width: 180},
                {field: 'status', title: '状态', width: 100, templet: function(d){
                    return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                }},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#musicToolbar'}
            ]]
        });
        
        // 工具条模板
        layui.jquery('body').append(`
            <script type="text/html" id="musicToolbar">
                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="play"><i class="layui-icon layui-icon-play"></i> 播放</a>
                <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="pause" style="display:none;"><i class="layui-icon layui-icon-pause"></i> 暂停</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            <\/script>
        `);
        
        // 监听工具条
        layui.table.on('tool(musicListTable)', function(obj){
            if(obj.event === 'delete'){
                deleteMusicItem(obj.data);
            } else if(obj.event === 'edit'){
                editMusicItem(obj.data);
            } else if(obj.event === 'play'){
                playMusicItem(obj.data, obj);
            } else if(obj.event === 'pause'){
                pauseMusicItem(obj.data, obj);
            }
        });
    }
    
    // 歌手列表页面
    function loadSingerList() {
        var html = `
            <fieldset class="layui-elem-field">
                <legend>歌手管理</legend>
                <div class="layui-field-box">
                    <div class="layui-btn-group" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm" onclick="showAddSingerForm()">
                            <i class="layui-icon layui-icon-add-1"></i> 添加歌手
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="layui.table.reload('singerListTable')">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="singerListTable" lay-filter="singerListTable"></table>
                </div>
            </fieldset>
        `;
        document.getElementById('singerListPage').innerHTML = html;
        
        layui.table.render({
            elem: '#singerListTable',
            url: API_BASE + '/singer/list',
            page: true,
            limit: 15,
            parseData: function(res){
                return {
                    "code": res.success ? 0 : 1,
                    "msg": res.message || '',
                    "count": res.data.total || 0,
                    "data": res.data.records || []
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'name', title: '歌手名', width: 150},
                {field: 'type', title: '类型', width: 100},
                {field: 'nationality', title: '国籍', width: 100},
                {field: 'tags', title: '风格标签', width: 200},
                {field: 'status', title: '状态', width: 100, templet: function(d){
                    return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                }},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#singerToolbar'}
            ]]
        });
        
        layui.jquery('body').append(`
            <script type="text/html" id="singerToolbar">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            <\/script>
        `);
        
        layui.table.on('tool(singerListTable)', function(obj){
            if(obj.event === 'delete'){
                deleteSingerItem(obj.data);
            } else if(obj.event === 'edit'){
                editSingerItem(obj.data);
            }
        });
    }
    
    // 专辑列表
    function loadAlbumList() {
        var html = `
            <fieldset class="layui-elem-field">
                <legend>专辑管理</legend>
                <div class="layui-field-box">
                    <div class="layui-btn-group" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm" onclick="showAddAlbumForm()">
                            <i class="layui-icon layui-icon-add-1"></i> 添加专辑
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="layui.table.reload('albumListTable')">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="albumListTable" lay-filter="albumListTable"></table>
                </div>
            </fieldset>
        `;
        document.getElementById('albumListPage').innerHTML = html;
        
        layui.table.render({
            elem: '#albumListTable',
            url: API_BASE + '/album/list',
            page: true,
            limit: 15,
            parseData: function(res){
                return {
                    "code": res.success ? 0 : 1,
                    "msg": res.message || '',
                    "count": res.data.total || 0,
                    "data": res.data.records || []
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'name', title: '专辑名称', width: 200},
                {field: 'company', title: '发行公司', width: 150},
                {field: 'releaseDate', title: '发行日期', width: 150},
                {field: 'status', title: '状态', width: 100, templet: function(d){
                    return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge">下架</span>';
                }},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#albumToolbar'}
            ]]
        });
        
        layui.jquery('body').append(`
            <script type="text/html" id="albumToolbar">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            <\/script>
        `);
        
        layui.table.on('tool(albumListTable)', function(obj){
            if(obj.event === 'delete'){
                deleteAlbumItem(obj.data);
            } else if(obj.event === 'edit'){
                editAlbumItem(obj.data);
            }
        });
    }
    
    // 用户列表
    function loadUserList() {
        var html = `
            <fieldset class="layui-elem-field">
                <legend>用户管理</legend>
                <div class="layui-field-box">
                    <div class="layui-btn-group" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="layui.table.reload('userListTable')">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="userListTable" lay-filter="userListTable"></table>
                </div>
            </fieldset>
        `;
        document.getElementById('userListPage').innerHTML = html;
        
        layui.table.render({
            elem: '#userListTable',
            url: API_BASE + '/user/list',
            page: true,
            limit: 15,
            parseData: function(res){
                return {
                    "code": res.success ? 0 : 1,
                    "msg": res.message || '',
                    "count": res.data.total || 0,
                    "data": res.data.records || []
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'username', title: '用户名', width: 150},
                {field: 'phone', title: '手机号', width: 130},
                {field: 'email', title: '邮箱', width: 180},
                {field: 'registerTime', title: '注册时间', width: 180},
                {field: 'status', title: '状态', width: 100, templet: function(d){
                    return d.status == 1 ? '<span class="layui-badge layui-bg-green">正常</span>' : '<span class="layui-badge layui-bg-gray">禁用</span>';
                }},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#userToolbar'}
            ]]
        });
        
        layui.jquery('body').append(`
            <script type="text/html" id="userToolbar">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="toggleStatus">{{# if(d.status == 1) { }}禁用{{# } else { }}启用{{# } }}</a>
            <\/script>
        `);
        
        layui.table.on('tool(userListTable)', function(obj){
            if(obj.event === 'toggleStatus'){
                toggleUserStatus(obj.data);
            } else if(obj.event === 'edit'){
                editUserItem(obj.data);
            }
        });
    }
    
    // 编辑用户
    function editUserItem(data) {
        layui.layer.open({
            type: 1,
            title: '编辑用户',
            area: ['500px', '400px'],
            content: `
                <form class="layui-form" style="padding: 20px;" lay-filter="editUserForm">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" class="layui-input" value="${data.username || ''}" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" placeholder="请输入手机号" class="layui-input" value="${data.phone || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" placeholder="请输入邮箱" class="layui-input" value="${data.email || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="正常" ${data.status == 1 ? 'checked' : ''}>
                            <input type="radio" name="status" value="0" title="禁用" ${data.status == 0 ? 'checked' : ''}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitEditUser">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                
                layui.form.on('submit(submitEditUser)', function(formdata){
                    fetch(API_BASE + '/user', {
                        method: 'PUT',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(formdata.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('更新成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('userListTable')) {
                                layui.table.reload('userListTable');
                            }
                        } else {
                            layui.layer.msg('更新失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    // 歌单列表
    function loadPlaylistList() {
        var html = `
            <fieldset class="layui-elem-field">
                <legend>歌单管理</legend>
                <div class="layui-field-box">
                    <div class="layui-btn-group" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="layui.table.reload('playlistListTable')">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="playlistListTable" lay-filter="playlistListTable"></table>
                </div>
            </fieldset>
        `;
        document.getElementById('playlistListPage').innerHTML = html;
        
        layui.table.render({
            elem: '#playlistListTable',
            url: API_BASE + '/playlist/list',
            page: true,
            limit: 15,
            parseData: function(res){
                return {
                    "code": res.success ? 0 : 1,
                    "msg": res.message || '',
                    "count": res.data.total || 0,
                    "data": res.data.records || []
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'name', title: '歌单名称', width: 200},
                {field: 'userId', title: '创建者ID', width: 120},
                {field: 'createTime', title: '创建时间', width: 180},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#playlistToolbar'}
            ]]
        });
        
        layui.jquery('body').append(`
            <script type="text/html" id="playlistToolbar">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            <\/script>
        `);
        
        layui.table.on('tool(playlistListTable)', function(obj){
            if(obj.event === 'delete'){
                deletePlaylistItem(obj.data);
            } else if(obj.event === 'edit'){
                editPlaylistItem(obj.data);
            }
        });
    }
    
    // 评论列表
    function loadCommentList() {
        var html = `
            <fieldset class="layui-elem-field">
                <legend>评论管理</legend>
                <div class="layui-field-box">
                    <div class="layui-btn-group" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="layui.table.reload('commentListTable')">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="commentListTable" lay-filter="commentListTable"></table>
                </div>
            </fieldset>
        `;
        document.getElementById('commentListPage').innerHTML = html;
        
        layui.table.render({
            elem: '#commentListTable',
            url: API_BASE + '/comment/list',
            page: true,
            limit: 15,
            parseData: function(res){
                return {
                    "code": res.success ? 0 : 1,
                    "msg": res.message || '',
                    "count": res.data.total || 0,
                    "data": res.data.records || []
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'userId', title: '用户ID', width: 100},
                {field: 'content', title: '评论内容', minWidth: 200},
                {field: 'likeCount', title: '点赞数', width: 100},
                {field: 'createTime', title: '评论时间', width: 180},
                {fixed: 'right', title: '操作', width: 200, toolbar: '#commentToolbar'}
            ]]
        });
        
        layui.jquery('body').append(`
            <script type="text/html" id="commentToolbar">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
            <\/script>
        `);
        
        layui.table.on('tool(commentListTable)', function(obj){
            if(obj.event === 'delete'){
                deleteCommentItem(obj.data);
            } else if(obj.event === 'edit'){
                editCommentItem(obj.data);
            }
        });
    }
    
    // 编辑歌单
    function editPlaylistItem(data) {
        layui.layer.open({
            type: 1,
            title: '编辑歌单',
            area: ['500px', '300px'],
            content: `
                <form class="layui-form" style="padding: 20px;" lay-filter="editPlaylistForm">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入歌单名称" class="layui-input" value="${data.name || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">创建者ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="userId" required lay-verify="required" placeholder="请输入创建者ID" class="layui-input" value="${data.userId || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitEditPlaylist">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                
                layui.form.on('submit(submitEditPlaylist)', function(formdata){
                    fetch(API_BASE + '/playlist', {
                        method: 'PUT',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(formdata.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('更新成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('playlistListTable')) {
                                layui.table.reload('playlistListTable');
                            }
                        } else {
                            layui.layer.msg('更新失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    // 编辑评论
    function editCommentItem(data) {
        layui.layer.open({
            type: 1,
            title: '编辑评论',
            area: ['500px', '350px'],
            content: `
                <form class="layui-form" style="padding: 20px;" lay-filter="editCommentForm">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="userId" required lay-verify="required" placeholder="请输入用户ID" class="layui-input" value="${data.userId || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">评论内容</label>
                        <div class="layui-input-block">
                            <textarea name="content" required lay-verify="required" placeholder="请输入评论内容" class="layui-textarea">${data.content || ''}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">点赞数</label>
                        <div class="layui-input-block">
                            <input type="number" name="likeCount" placeholder="请输入点赞数" class="layui-input" value="${data.likeCount || 0}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitEditComment">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                
                layui.form.on('submit(submitEditComment)', function(formdata){
                    fetch(API_BASE + '/comment', {
                        method: 'PUT',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(formdata.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('更新成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('commentListTable')) {
                                layui.table.reload('commentListTable');
                            }
                        } else {
                            layui.layer.msg('更新失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    // ===== 添加表单函数 =====
    function showAddMusicForm() {
        layui.layer.open({
            type: 1,
            title: '添加音乐',
            area: ['600px', '600px'],
            content: `
                <form class="layui-form" style="padding: 20px;" lay-filter="addMusicForm">
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌曲名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入歌曲名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">音频文件</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="musicFileBtn">
                                <i class="layui-icon layui-icon-upload"></i> 上传音频文件
                            </button>
                            <input type="hidden" name="url" id="musicUrl" required lay-verify="required">
                            <div id="musicFileName" style="margin-top: 10px; color: #666;"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">时长(秒)</label>
                        <div class="layui-input-block">
                            <input type="number" name="duration" required lay-verify="required" placeholder="请输入时长" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">专辑ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="albumId" placeholder="请输入专辑ID" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="singerId" placeholder="请输入歌手ID" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发行时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="releaseTime" id="addMusicReleaseTime" placeholder="请选择日期" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitAddMusic">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                layui.laydate.render({
                    elem: '#addMusicReleaseTime',
                    type: 'datetime'
                });
                
                // 文件上传
                layui.upload.render({
                    elem: '#musicFileBtn',
                    url: API_BASE + '/admin/music/upload',
                    accept: 'audio',
                    exts: 'mp3|wav|flac|aac|ogg|m4a',
                    before: function(obj){
                        layui.layer.load(); //上传loading
                    },
                    done: function(res){
                        layui.layer.closeAll('loading'); //关闭loading
                        if(res.success){
                            layui.layer.msg('上传成功', {icon: 1});
                            document.getElementById('musicUrl').value = res.data;
                            document.getElementById('musicFileName').innerHTML = '已上传: ' + res.data.split('/').pop();
                        } else {
                            layui.layer.msg('上传失败: ' + res.message, {icon: 2});
                        }
                    },
                    error: function(){
                        layui.layer.closeAll('loading'); //关闭loading
                        layui.layer.msg('上传异常', {icon: 2});
                    }
                });
                
                layui.form.on('submit(submitAddMusic)', function(data){
                    // 检查是否已上传文件
                    if(!data.field.url){
                        layui.layer.msg('请先上传音频文件', {icon: 2});
                        return false;
                    }
                    
                    fetch(API_BASE + '/music', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(data.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('添加成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('musicListTable')) {
                                layui.table.reload('musicListTable');
                            }
                        } else {
                            layui.layer.msg('添加失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    function showAddSingerForm() {
        layui.layer.open({
            type: 1,
            title: '添加歌手',
            area: ['600px', '550px'],
            content: `
                <form class="layui-form" style="padding: 20px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入歌手名" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-block">
                            <select name="type" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                                <option value="组合">组合</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">国籍</label>
                        <div class="layui-input-block">
                            <input type="text" name="nationality" placeholder="请输入国籍" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">风格标签</label>
                        <div class="layui-input-block">
                            <input type="text" name="tags" placeholder="用逗号分隔" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像URL</label>
                        <div class="layui-input-block">
                            <input type="text" name="avatar" placeholder="请输入头像URL" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">简介</label>
                        <div class="layui-input-block">
                            <textarea name="introduction" placeholder="请输入简介" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitAddSinger">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                
                layui.form.on('submit(submitAddSinger)', function(data){
                    fetch(API_BASE + '/singer', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(data.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('添加成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('singerListTable')) {
                                layui.table.reload('singerListTable');
                            }
                        } else {
                            layui.layer.msg('添加失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    function showAddAlbumForm() {
        layui.layer.open({
            type: 1,
            title: '添加专辑',
            area: ['600px', '500px'],
            content: `
                <form class="layui-form" style="padding: 20px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">专辑名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入专辑名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="singerId" required lay-verify="required" placeholder="请输入歌手ID" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发行公司</label>
                        <div class="layui-input-block">
                            <input type="text" name="company" placeholder="请输入发行公司" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面URL</label>
                        <div class="layui-input-block">
                            <input type="text" name="pic" placeholder="请输入封面URL" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发行日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="releaseDate" id="addAlbumReleaseDate" placeholder="请选择日期" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">简介</label>
                        <div class="layui-input-block">
                            <textarea name="introduction" placeholder="请输入简介" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitAddAlbum">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                layui.laydate.render({
                    elem: '#addAlbumReleaseDate',
                    type: 'date'
                });
                
                layui.form.on('submit(submitAddAlbum)', function(data){
                    fetch(API_BASE + '/album', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(data.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('添加成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('albumListTable')) {
                                layui.table.reload('albumListTable');
                            }
                        } else {
                            layui.layer.msg('添加失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    // ===== 编辑函数 =====
    function editMusicItem(data) {
        layui.layer.open({
            type: 1,
            title: '编辑音乐',
            area: ['600px', '600px'],
            content: `
                <form class="layui-form" style="padding: 20px;" lay-filter="editMusicForm">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌曲名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入歌曲名称" class="layui-input" value="${data.name || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">音频文件</label>
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="editMusicFileBtn">
                                <i class="layui-icon layui-icon-upload"></i> 重新上传音频文件
                            </button>
                            <input type="hidden" name="url" id="editMusicUrl" value="${data.url || ''}">
                            <div id="editMusicFileName" style="margin-top: 10px; color: #666;">当前文件: ${data.url ? data.url.split('/').pop() : '无'}</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">时长(秒)</label>
                        <div class="layui-input-block">
                            <input type="number" name="duration" required lay-verify="required" placeholder="请输入时长" class="layui-input" value="${data.duration || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">专辑ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="albumId" placeholder="请输入专辑ID" class="layui-input" value="${data.albumId || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="singerId" placeholder="请输入歌手ID" class="layui-input" value="${data.singerId || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发行时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="releaseTime" id="editMusicReleaseTime" placeholder="请选择日期" class="layui-input" value="${data.releaseTime || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="正常" ${data.status == 1 ? 'checked' : ''}>
                            <input type="radio" name="status" value="0" title="下架" ${data.status == 0 ? 'checked' : ''}>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitEditMusic">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                layui.laydate.render({
                    elem: '#editMusicReleaseTime',
                    type: 'datetime',
                    value: data.releaseTime || new Date()
                });
                
                // 文件上传
                layui.upload.render({
                    elem: '#editMusicFileBtn',
                    url: API_BASE + '/admin/music/upload',
                    accept: 'audio',
                    exts: 'mp3|wav|flac|aac|ogg|m4a',
                    before: function(obj){
                        layui.layer.load(); //上传loading
                    },
                    done: function(res){
                        layui.layer.closeAll('loading'); //关闭loading
                        if(res.success){
                            layui.layer.msg('上传成功', {icon: 1});
                            document.getElementById('editMusicUrl').value = res.data;
                            document.getElementById('editMusicFileName').innerHTML = '已上传: ' + res.data.split('/').pop();
                        } else {
                            layui.layer.msg('上传失败: ' + res.message, {icon: 2});
                        }
                    },
                    error: function(){
                        layui.layer.closeAll('loading'); //关闭loading
                        layui.layer.msg('上传异常', {icon: 2});
                    }
                });
                
                layui.form.on('submit(submitEditMusic)', function(formdata){
                    fetch(API_BASE + '/music', {
                        method: 'PUT',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(formdata.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('更新成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('musicListTable')) {
                                layui.table.reload('musicListTable');
                            }
                        } else {
                            layui.layer.msg('更新失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    function editSingerItem(data) {
        layui.layer.open({
            type: 1,
            title: '编辑歌手',
            area: ['600px', '550px'],
            content: `
                <form class="layui-form" style="padding: 20px;" lay-filter="editSingerForm">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入歌手名" class="layui-input" value="${data.name || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-block">
                            <select name="type" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="男" ${data.type == '男' ? 'selected' : ''}>男</option>
                                <option value="女" ${data.type == '女' ? 'selected' : ''}>女</option>
                                <option value="组合" ${data.type == '组合' ? 'selected' : ''}>组合</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">国籍</label>
                        <div class="layui-input-block">
                            <input type="text" name="nationality" placeholder="请输入国籍" class="layui-input" value="${data.nationality || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">风格标签</label>
                        <div class="layui-input-block">
                            <input type="text" name="tags" placeholder="用逗号分隔" class="layui-input" value="${data.tags || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">头像URL</label>
                        <div class="layui-input-block">
                            <input type="text" name="avatar" placeholder="请输入头像URL" class="layui-input" value="${data.avatar || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="正常" ${data.status == 1 ? 'checked' : ''}>
                            <input type="radio" name="status" value="0" title="下架" ${data.status == 0 ? 'checked' : ''}>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">简介</label>
                        <div class="layui-input-block">
                            <textarea name="introduction" placeholder="请输入简介" class="layui-textarea">${data.introduction || ''}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitEditSinger">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                
                layui.form.on('submit(submitEditSinger)', function(formdata){
                    fetch(API_BASE + '/singer', {
                        method: 'PUT',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(formdata.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('更新成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('singerListTable')) {
                                layui.table.reload('singerListTable');
                            }
                        } else {
                            layui.layer.msg('更新失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    function editAlbumItem(data) {
        layui.layer.open({
            type: 1,
            title: '编辑专辑',
            area: ['600px', '550px'],
            content: `
                <form class="layui-form" style="padding: 20px;" lay-filter="editAlbumForm">
                    <input type="hidden" name="id" value="${data.id}">
                    <div class="layui-form-item">
                        <label class="layui-form-label">专辑名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入专辑名称" class="layui-input" value="${data.name || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">歌手ID</label>
                        <div class="layui-input-block">
                            <input type="number" name="singerId" required lay-verify="required" placeholder="请输入歌手ID" class="layui-input" value="${data.singerId || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发行公司</label>
                        <div class="layui-input-block">
                            <input type="text" name="company" placeholder="请输入发行公司" class="layui-input" value="${data.company || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面URL</label>
                        <div class="layui-input-block">
                            <input type="text" name="pic" placeholder="请输入封面URL" class="layui-input" value="${data.pic || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发行日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="releaseDate" id="editAlbumReleaseDate" placeholder="请选择日期" class="layui-input" value="${data.releaseDate || ''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="正常" ${data.status == 1 ? 'checked' : ''}>
                            <input type="radio" name="status" value="0" title="下架" ${data.status == 0 ? 'checked' : ''}>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">简介</label>
                        <div class="layui-input-block">
                            <textarea name="introduction" placeholder="请输入简介" class="layui-textarea">${data.introduction || ''}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitEditAlbum">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `,
            success: function(){
                layui.form.render();
                layui.laydate.render({
                    elem: '#editAlbumReleaseDate',
                    type: 'date',
                    value: data.releaseDate || new Date()
                });
                
                layui.form.on('submit(submitEditAlbum)', function(formdata){
                    fetch(API_BASE + '/album', {
                        method: 'PUT',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(formdata.field)
                    })
                    .then(res => res.json())
                    .then(result => {
                        if(result.success) {
                            layui.layer.msg('更新成功', {icon: 1});
                            layui.layer.closeAll();
                            if(document.getElementById('albumListTable')) {
                                layui.table.reload('albumListTable');
                            }
                        } else {
                            layui.layer.msg('更新失败: ' + result.message, {icon: 2});
                        }
                    });
                    return false;
                });
            }
        });
    }
    
    // ===== 删除函数 =====
    function deleteMusicItem(data) {
        layui.layer.confirm('确定要删除这首音乐吗？', {icon: 3, title: '提示'}, function(index){
            fetch(API_BASE + '/music/' + data.id, {
                method: 'DELETE'
            })
            .then(res => res.json())
            .then(result => {
                if(result.success) {
                    layui.layer.msg('删除成功', {icon: 1});
                    layui.table.reload('musicListTable');
                } else {
                    layui.layer.msg('删除失败: ' + result.message, {icon: 2});
                }
            });
            layui.layer.close(index);
        });
    }
    
    function deleteSingerItem(data) {
        layui.layer.confirm('确定要删除这位歌手吗？', {icon: 3, title: '提示'}, function(index){
            fetch(API_BASE + '/singer/' + data.id, {
                method: 'DELETE'
            })
            .then(res => res.json())
            .then(result => {
                if(result.success) {
                    layui.layer.msg('删除成功', {icon: 1});
                    layui.table.reload('singerListTable');
                } else {
                    layui.layer.msg('删除失败: ' + result.message, {icon: 2});
                }
            });
            layui.layer.close(index);
        });
    }
    
    function deleteAlbumItem(data) {
        layui.layer.confirm('确定要删除这张专辑吗？', {icon: 3, title: '提示'}, function(index){
            fetch(API_BASE + '/album/' + data.id, {
                method: 'DELETE'
            })
            .then(res => res.json())
            .then(result => {
                if(result.success) {
                    layui.layer.msg('删除成功', {icon: 1});
                    layui.table.reload('albumListTable');
                } else {
                    layui.layer.msg('删除失败: ' + result.message, {icon: 2});
                }
            });
            layui.layer.close(index);
        });
    }
    
    function deletePlaylistItem(data) {
        layui.layer.confirm('确定要删除这个歌单吗？', {icon: 3, title: '提示'}, function(index){
            fetch(API_BASE + '/playlist/' + data.id, {
                method: 'DELETE'
            })
            .then(res => res.json())
            .then(result => {
                if(result.success) {
                    layui.layer.msg('删除成功', {icon: 1});
                    layui.table.reload('playlistListTable');
                } else {
                    layui.layer.msg('删除失败: ' + result.message, {icon: 2});
                }
            });
            layui.layer.close(index);
        });
    }
    
    function deleteCommentItem(data) {
        layui.layer.confirm('确定要删除这条评论吗？', {icon: 3, title: '提示'}, function(index){
            fetch(API_BASE + '/comment/' + data.id, {
                method: 'DELETE'
            })
            .then(res => res.json())
            .then(result => {
                if(result.success) {
                    layui.layer.msg('删除成功', {icon: 1});
                    layui.table.reload('commentListTable');
                } else {
                    layui.layer.msg('删除失败: ' + result.message, {icon: 2});
                }
            });
            layui.layer.close(index);
        });
    }
    
    // 切换用户状态
    function toggleUserStatus(data) {
        var newStatus = data.status == 1 ? 0 : 1;
        var action = newStatus == 1 ? '启用' : '禁用';
        
        layui.layer.confirm('确定要' + action + '该用户吗？', {icon: 3, title: '提示'}, function(index){
            fetch(API_BASE + '/user/status/' + data.id + '?status=' + newStatus, {
                method: 'PUT'
            })
            .then(res => res.json())
            .then(result => {
                if(result.success) {
                    layui.layer.msg(action + '成功', {icon: 1});
                    layui.table.reload('userListTable');
                } else {
                    layui.layer.msg(action + '失败: ' + result.message, {icon: 2});
                }
            });
            layui.layer.close(index);
        });
    }
    
    // 播放音乐
    function playMusicItem(data, obj) {
        // 检查音乐URL是否存在
        if (!data.url) {
            layui.layer.msg('音乐文件不存在，无法播放', {icon: 2});
            return;
        }
        
        // 调用后端接口增加播放次数
        fetch(API_BASE + '/music/play/' + data.id, {
            method: 'PUT'
        })
        .then(res => res.json())
        .then(result => {
            if (!result.success) {
                console.log('增加播放次数失败: ' + result.message);
            }
        })
        .catch(error => {
            console.log('增加播放次数异常: ' + error);
        });
        
        // 创建音频播放器
        var audio = document.getElementById('musicPlayer');
        if (!audio) {
            // 如果播放器不存在，则创建一个
            audio = document.createElement('audio');
            audio.id = 'musicPlayer';
            audio.style.display = 'none';
            document.body.appendChild(audio);
        }
        
        // 如果点击的是不同的音乐，则停止当前播放并播放新音乐
        var currentMusicId = audio.getAttribute('data-current-music-id');
        if (currentMusicId && currentMusicId != data.id) {
            audio.pause();
            // 更新之前播放音乐的按钮状态
            updateMusicToolbarButtons(currentMusicId, false);
        }
        
        // 设置音频源并播放
        audio.src = data.url;
        audio.setAttribute('data-current-music-id', data.id);
        
        // 添加播放事件监听（只在首次创建时添加）
        if (!audio.hasAttribute('data-listeners-added')) {
            // 添加播放事件监听
            audio.addEventListener('play', function() {
                var currentId = this.getAttribute('data-current-music-id');
                if (currentId) {
                    // 显示暂停按钮，隐藏播放按钮
                    updateMusicToolbarButtons(currentId, true);
                }
            });
            
            // 添加暂停事件监听
            audio.addEventListener('pause', function() {
                // 隐藏暂停按钮，显示播放按钮
                var currentId = this.getAttribute('data-current-music-id');
                if (currentId) {
                    updateMusicToolbarButtons(currentId, false);
                }
            });
            
            // 添加播放结束事件监听
            audio.addEventListener('ended', function() {
                var currentId = this.getAttribute('data-current-music-id');
                if (currentId) {
                    // 播放结束时，隐藏暂停按钮，显示播放按钮
                    updateMusicToolbarButtons(currentId, false);
                    // 自动播放下一首
                    playNextMusic();
                }
            });
            
            // 添加错误事件监听
            audio.addEventListener('error', function() {
                layui.layer.msg('播放失败，请检查音频文件', {icon: 2});
                var currentId = this.getAttribute('data-current-music-id');
                if (currentId) {
                    // 隐藏暂停按钮，显示播放按钮
                    updateMusicToolbarButtons(currentId, false);
                }
            });
            
            audio.setAttribute('data-listeners-added', 'true');
        }
        
        // 保存当前音乐信息
        audio.setAttribute('data-current-music-name', data.name);
        audio.setAttribute('data-current-music-id', data.id);
        
        // 播放音乐
        audio.play().catch(function(error) {
            layui.layer.msg('播放失败: ' + error.message, {icon: 2});
        });
        
        // 显示播放控制窗口
        showMusicPlayerWindow(data, audio);
    }
    
    // 显示音乐播放控制窗口
    function showMusicPlayerWindow(musicData, audio) {
        // 先关闭已存在的播放窗口
        if (window.musicPlayerLayerIndex) {
            layui.layer.close(window.musicPlayerLayerIndex);
        }
        
        window.musicPlayerLayerIndex = layui.layer.open({
            type: 1,
            title: '音乐播放器',
            area: ['500px', '300px'],
            shade: 0, // 不显示遮罩
            offset: 'rb', // 右下角显示
            anim: 2, // 滑入动画
            content: `
                <div style="padding: 20px; background: #f8f8f8;">
                    <div style="text-align: center; margin-bottom: 15px;">
                        <h3 style="margin: 0 0 5px 0; color: #333;">${musicData.name || '未知歌曲'}</h3>
                        <p style="margin: 0; color: #999; font-size: 14px;">${musicData.singerName || '未知歌手'}</p>
                    </div>
                    
                    <!-- 进度条 -->
                    <div style="margin-bottom: 15px;">
                        <div style="display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-bottom: 5px;">
                            <span id="currentTime">00:00</span>
                            <span id="totalTime">00:00</span>
                        </div>
                        <div id="progressBar" style="height: 6px; background: #e6e6e6; border-radius: 3px; cursor: pointer; position: relative;">
                            <div id="progress" style="width: 0%; height: 100%; background: #1E9FFF; border-radius: 3px; position: relative;">
                                <div id="progressHandle" style="width: 12px; height: 12px; background: #1E9FFF; border-radius: 50%; position: absolute; right: -6px; top: -3px; cursor: pointer; display: none;"></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 控制按钮 -->
                    <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 15px;">
                        <button id="prevBtn" class="layui-btn layui-btn-primary layui-btn-sm" style="width: 40px; height: 40px; border-radius: 50%; margin: 0 10px;">
                            <i class="layui-icon layui-icon-left"></i>
                        </button>
                        <button id="playPauseBtn" class="layui-btn layui-btn-normal layui-btn-sm" style="width: 50px; height: 50px; border-radius: 50%;">
                            <i class="layui-icon layui-icon-pause"></i>
                        </button>
                        <button id="nextBtn" class="layui-btn layui-btn-primary layui-btn-sm" style="width: 40px; height: 40px; border-radius: 50%; margin: 0 10px;">
                            <i class="layui-icon layui-icon-right"></i>
                        </button>
                    </div>
                    
                    <!-- 音量控制 -->
                    <div style="display: flex; align-items: center;">
                        <i class="layui-icon layui-icon-volume" style="font-size: 20px; margin-right: 10px; color: #666;"></i>
                        <div id="volumeBar" style="flex: 1; height: 6px; background: #e6e6e6; border-radius: 3px; cursor: pointer; position: relative;">
                            <div id="volumeProgress" style="width: 100%; height: 100%; background: #1E9FFF; border-radius: 3px;"></div>
                            <div id="volumeHandle" style="width: 12px; height: 12px; background: #1E9FFF; border-radius: 50%; position: absolute; right: -6px; top: -3px; cursor: pointer;"></div>
                        </div>
                    </div>
                </div>
            `,
            cancel: function() {
                // 关闭窗口时停止播放
                if (audio) {
                    audio.pause();
                }
            },
            success: function(layero, index) {
                // 初始化音频事件监听
                initAudioEvents(audio);
                
                // 初始化控制按钮事件
                initControlButtons(audio);
                
                // 初始化进度条事件
                initProgressEvents(audio);
                
                // 初始化音量控制事件
                initVolumeEvents(audio);
            }
        });
    }
    
    // 初始化音频事件监听
    function initAudioEvents(audio) {
        // 时间更新事件
        audio.addEventListener('timeupdate', function() {
            updateProgress(audio);
        });
        
        // 加载元数据事件
        audio.addEventListener('loadedmetadata', function() {
            updateTotalTime(audio);
        });
        
        // 播放状态切换事件
        audio.addEventListener('play', function() {
            updatePlayPauseButton(true);
        });
        
        audio.addEventListener('pause', function() {
            updatePlayPauseButton(false);
        });
    }
    
    // 初始化控制按钮事件
    function initControlButtons(audio) {
        // 播放/暂停按钮
        document.getElementById('playPauseBtn').addEventListener('click', function() {
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
        });
        
        // 上一首按钮
        document.getElementById('prevBtn').addEventListener('click', function() {
            playPrevMusic();
        });
        
        // 下一首按钮
        document.getElementById('nextBtn').addEventListener('click', function() {
            playNextMusic();
        });
    }
    
    // 初始化进度条事件
    function initProgressEvents(audio) {
        const progressBar = document.getElementById('progressBar');
        const progress = document.getElementById('progress');
        const progressHandle = document.getElementById('progressHandle');
        
        // 显示进度条手柄
        progressBar.addEventListener('mouseenter', function() {
            progressHandle.style.display = 'block';
        });
        
        progressBar.addEventListener('mouseleave', function() {
            progressHandle.style.display = 'none';
        });
        
        // 点击进度条跳转
        progressBar.addEventListener('click', function(e) {
            const rect = progressBar.getBoundingClientRect();
            const pos = (e.clientX - rect.left) / rect.width;
            const time = pos * audio.duration;
            audio.currentTime = time;
        });
        
        // 拖动进度条手柄
        let isDragging = false;
        progressHandle.addEventListener('mousedown', function(e) {
            isDragging = true;
            e.preventDefault();
        });
        
        document.addEventListener('mousemove', function(e) {
            if (isDragging) {
                const rect = progressBar.getBoundingClientRect();
                let pos = (e.clientX - rect.left) / rect.width;
                pos = Math.max(0, Math.min(1, pos)); // 限制在0-1之间
                const time = pos * audio.duration;
                audio.currentTime = time;
            }
        });
        
        document.addEventListener('mouseup', function() {
            isDragging = false;
        });
    }
    
    // 初始化音量控制事件
    function initVolumeEvents(audio) {
        const volumeBar = document.getElementById('volumeBar');
        const volumeProgress = document.getElementById('volumeProgress');
        const volumeHandle = document.getElementById('volumeHandle');
        
        // 点击音量条调整音量
        volumeBar.addEventListener('click', function(e) {
            const rect = volumeBar.getBoundingClientRect();
            const pos = (e.clientX - rect.left) / rect.width;
            const volume = Math.max(0, Math.min(1, pos)); // 限制在0-1之间
            audio.volume = volume;
            updateVolumeDisplay(volume);
        });
        
        // 拖动音量手柄
        let isDragging = false;
        volumeHandle.addEventListener('mousedown', function(e) {
            isDragging = true;
            e.preventDefault();
        });
        
        document.addEventListener('mousemove', function(e) {
            if (isDragging) {
                const rect = volumeBar.getBoundingClientRect();
                let pos = (e.clientX - rect.left) / rect.width;
                pos = Math.max(0, Math.min(1, pos)); // 限制在0-1之间
                audio.volume = pos;
                updateVolumeDisplay(pos);
            }
        });
        
        document.addEventListener('mouseup', function() {
            isDragging = false;
        });
        
        // 初始化音量显示
        updateVolumeDisplay(audio.volume);
    }
    
    // 更新进度显示
    function updateProgress(audio) {
        if (audio.duration) {
            const progressPercent = (audio.currentTime / audio.duration) * 100;
            document.getElementById('progress').style.width = progressPercent + '%';
            document.getElementById('currentTime').textContent = formatTime(audio.currentTime);
        }
    }
    
    // 更新总时间显示
    function updateTotalTime(audio) {
        document.getElementById('totalTime').textContent = formatTime(audio.duration);
    }
    
    // 更新播放/暂停按钮状态
    function updatePlayPauseButton(isPlaying) {
        const btn = document.getElementById('playPauseBtn');
        const icon = btn.querySelector('.layui-icon');
        if (isPlaying) {
            icon.className = 'layui-icon layui-icon-pause';
        } else {
            icon.className = 'layui-icon layui-icon-play';
        }
    }
    
    // 更新音量显示
    function updateVolumeDisplay(volume) {
        const volumePercent = volume * 100;
        document.getElementById('volumeProgress').style.width = volumePercent + '%';
        document.getElementById('volumeHandle').style.left = volumePercent + '%';
    }
    
    // 格式化时间显示
    function formatTime(seconds) {
        if (isNaN(seconds)) return '00:00';
        const min = Math.floor(seconds / 60);
        const sec = Math.floor(seconds % 60);
        return (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec);
    }
    
    // 播放下一首音乐
    function playNextMusic() {
        // 这里可以实现播放列表逻辑
        layui.layer.msg('下一首', {icon: 1});
    }
    
    // 播放上一首音乐
    function playPrevMusic() {
        // 这里可以实现播放列表逻辑
        layui.layer.msg('上一首', {icon: 1});
    }
    
    // 暂停音乐
    function pauseMusicItem(data, obj) {
        var audio = document.getElementById('musicPlayer');
        if (audio && audio.getAttribute('data-current-music-id') == data.id) {
            audio.pause();
        } else {
            layui.layer.msg('当前没有播放此音乐', {icon: 2});
        }
    }
    
    // 更新音乐工具栏按钮显示状态
    function updateMusicToolbarButtons(musicId, isPlaying) {
        // 隐藏所有暂停按钮，显示所有播放按钮
        layui.jquery('[lay-event="pause"]').hide();
        layui.jquery('[lay-event="play"]').show();
        
        if (isPlaying) {
            // 找到当前播放音乐的行，显示暂停按钮，隐藏播放按钮
            layui.jquery('tr').each(function() {
                var idCell = layui.jquery(this).find('td[data-field="id"]');
                if (idCell.length > 0 && idCell.text() == musicId) {
                    layui.jquery(this).find('[lay-event="play"]').hide();
                    layui.jquery(this).find('[lay-event="pause"]').show();
                }
            });
        }
    }
</script>
</body>
</html>
